<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>微笑表情</title>
		<style>
			.face{
				width: 300px;
				height: 300px;
				background-color: #ffaa00;
				border-radius: 50%;
				}
			 .cheek1{
				width: 60px;
				height: 60px;
				background-color: #f8bbd0;
				border-radius: 50%;
				position:relative;
				z-index: 500;
				left: 11px;
				top: 126px;
			} 
			 .cheek2{
				width: 60px;
				height: 60px;
				background-color: #f8bbd0;
				border-radius: 50%;
				position:relative;
				z-index: 500;
				left: 225px;
				top: 65px; 
			} 
			  .eye1{
				width: 120px;
				height: 25px;
				border-radius: 20%;
				background-color: #fff;
				position:relative;
				left: 170px;
				top: -36px;
			}
			.eye2{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #000;
				position:relative;
				left: 167px;
				top: -62px; 
			}
			.eye3{
				width: 120px;
				height: 25px;
				border-radius: 20%;
				background-color: #fff;
				position:relative;
				left: 10px;
				top: -90px;
			}
			.eye4{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #000;
				position:relative;
				left: 8px;
				top: -116px;
			}
			/* 奸笑表情：边框 倒角 旋转*/
			 .mouth{
				width: 190px;
				height: 190px; 
				border-top: 10px solid black;
				border-left: 10px solid black;
				border-radius: 50%;
				transform: rotate(225deg);
				position:relative;
				
				left: 42px;
				top: -140px;
			}
		</style>
	</head>
	<body>
		<!-- 奸笑表情 -->
		<div class="face">
			<div class="cheek1"></div>
			<div class="cheek2"></div>
			<div class="eye1"></div>
			<div class="eye2"></div>
			<div class="eye3"></div>
			<div class="eye4"></div>
			<div class="mouth"></div>
		</div>
		
	</body>
</html>